<template>
  <div style="width: 50%;margin: auto;padding-top: 20px">
    <el-card class="box-card">
      <div style="width: 80%;height: 100%;margin: 0 auto;">
        <p style="margin-top:50px;font-size: 25px;font-weight:bold;text-align: center">欢迎发布项目需求!</p>
        <p>发布需求后，IT帮将在1小时内为您推荐知名互联网公司的技术人才为您公司兼职开发。工作1小时后，如您对技术人员的服务不满意，可以无条件退款。</p>
        <p>如您需要协助发布需求，请直接联系客服微信：18310365363</p>

        <el-button type="success" style="width: 100%;margin: 20px 0 30px 0">点击联系招聘专员</el-button>
        <el-form :model="taskForm" :rules="rules" ref="form">

          <el-form-item label="项目名称" prop="mandateTitle">
            <el-input v-model="taskForm.mandateTitle" placeholder="请输入项目名称"></el-input>
          </el-form-item>

          <el-form-item label="项目描述（不少于10字，含有 联系电话/微信/邮箱等联系方式 将不会过审并导致封号）" prop="requirementsDescription">
            <el-input
                type="textarea"
                :rows="7"
                placeholder="请输入内容"
                v-model="taskForm.requirementsDescription"
                maxlength="300"
                show-word-limit>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-row :gutter="42">
              <el-col :span="14">
                <el-form-item label="需要技能" prop="skillsRequirements">
                  <el-select v-model="taskForm.skillsRequirements" multiple placeholder="请选择">
                    <el-option
                        v-for="item in skillOptions"
                        :key="item"
                        :label="item"
                        :value="item">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>


              <el-col :span="10">
                <el-form-item label="用人类别" prop="talentCategory">
                  <el-select v-model="taskForm.talentCategory">
                    <el-option
                        v-for="item in programmerOptions"
                        :key="item"
                        :label="item"
                        :value="item">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item>

            <el-row :gutter="38">
              <el-col :span="14">
                <el-form-item label="酬劳信息" prop="salary">
                  <el-input v-model="taskForm.salary" oninput="value=value.replace(/\D/,'')"
                            style="width: 200px" placeholder="请填写日薪"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="10">
                <el-form-item label="项目周期" prop="workCycle">
                  <el-input v-model="taskForm.workCycle" oninput="value=value.replace(/\D/,'')"
                            style="width: 200px" placeholder="预估周期"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

          </el-form-item>
          <el-form-item>
            <el-row :gutter="42">
              <el-col :span="14">
                <el-form-item label="工作方式" prop="operationMode">
                  <el-select v-model="taskForm.operationMode" placeholder="请选择">
                    <el-option
                        v-for="item in wayOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>

                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="工作地址" prop="workPlace">
                  <el-select v-model="taskForm.workPlace" placeholder="请选择城市">
                    <el-option
                        v-for="item in cityOptions"
                        :key="item"
                        :label="item"
                        :value="item">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>

          <el-divider><i class="el-icon-mobile-phone"></i></el-divider>

          <el-form-item>
            <el-row :gutter="38">
              <el-col :span="14">
                <el-form-item label="您的姓名" prop="isSuerName">
                  <el-input v-model="taskForm.isSuerName" style="width: 200px" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="手机号码" prop="isSuerTelephone">
                  <el-input v-model="taskForm.isSuerTelephone" placeholder="手机号码"
                            oninput="value=value.replace(/\D/,'')" style="width: 200px"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>

          <el-button type="success" style="width: 100%;margin-top: 30px;margin-bottom: 100px"
                     @click="sendTaskForm('form')">点击发布需求
          </el-button>

        </el-form>

      </div>
    </el-card>

    <div style="width: 100%;height: 100px"></div>
  </div>
</template>

<script>
import Vue from 'vue'
import {validatePhone, validateSalary, validateWorkCycle, validateSkills} from '../../../util/validate'

export default {
  name: "task",
  data() {
    return {
      taskForm: {
        talentCategory: '',
        mandateTitle: "",
        requirementsDescription: '',
        skillsRequirements: '',
        salary: '',
        workCycle: '',
        operationMode: '',
        workPlace: '',
        isSuerId: '',
        isSuerName: this.$store.state.userName,
        isSuerTelephone: '',
        code: ''
      },

      programmerOptions: [],
      skillOptions: ['Java', 'C++', 'Vue.js', 'C', 'Python', 'PHP', 'HTML5', 'UI', 'C#', 'MySQL', 'MyBatis', 'Spring', 'Photoshop',
        'JQuery', 'Angular.js', 'React.js', 'Android', 'CSS', 'Axure', 'Visio', 'Linux', 'Sketch'],
      wayOptions: [{
        value: 1,
        label: '远程'
      }, {
        value: 2,
        label: '驻场'
      }, {
        value: 3,
        label: '远程 + 驻场'
      }],

      cityOptions: [],
      rules: {
        mandateTitle: [
          {required: true, message: '请输入项目名称', trigger: 'blur'},
          {min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'}
        ],
        talentCategory: [
          {required: true, message: '请选择用人类别', trigger: 'change'},
        ],
        requirementsDescription: [
          {required: true, message: '请输入项目描述', trigger: 'blur'},
          {min: 10, max: 300, message: '长度在 10 到 300 个字符', trigger: 'blur'}
        ],
        skillsRequirements: [
          {validator: validateSkills, trigger: 'blur'},
          {required: true, message: '请选择技能', trigger: 'blur'}
        ],
        operationMode: [
          {required: true, message: '请选择工作方式', trigger: 'change'},
        ],
        workPlace: [
          {required: true, message: '请选择工作地址', trigger: 'change'},
        ],
        salary: [
          {required: true, message: '请填写酬劳信息', trigger: 'blur'},
          {validator: validateSalary, trigger: 'blur'},
        ],
        workCycle: [
          {required: true, message: '请填写项目周期', trigger: 'blur'},
          {validator: validateWorkCycle, trigger: 'blur'},
        ],
        isSuerTelephone: [
          {required: true, message: '请填写手机号码', trigger: 'blur'},
          {validator: validatePhone, trigger: 'blur'}
        ],
        isSuerName: [
          {required: true, message: '请填写姓名', trigger: 'blur'}
        ]

      }

    }
  },

  methods: {
    sendTaskForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.sendTask()
        } else {
          Vue.prototype.$notify.error({
            title: "错误",
            message: "任务表单提交失败"
          })
          return false;
        }
      });
      if (this.$store.state.userId === '') {
        Vue.prototype.$notify.error({
          title: "错误",
          message: "未登录或登录过期，请登录"
        })
        return
      }
    },
    async sendTask() {
      let skills = ''
      for (let i = 0; i < this.taskForm.skillsRequirements.length; i++) {
        skills += this.taskForm.skillsRequirements[i]
        if (i !== this.taskForm.skillsRequirements.length - 1) {
          skills += '，'
        }
      }
      this.taskForm.skillsRequirements = skills
      this.taskForm.isSuerId = this.$store.state.userId
      const {data: res} = await this.$http.post('/task/task', this.taskForm)
      if (res.code === "201") {
        Vue.prototype.$notify.success({
          title: "成功",
          message: "申请成功"
        })
        await this.$router.push('/userLoginMain/personCenter/pCMyWork')
      }
    },

    async getCitys() {
      const {data: res} = await this.$http.get('/task/getCitys')
      if (res.code === "200") {
        this.cityOptions = res.content
      } else {
        Vue.prototype.$notify.error({
          title: "错误",
          message: "数据获取异常"
        })
      }
    },
    async getTalentCategory() {
      const {data: res} = await this.$http.get('/task/getTalentCategory')
      if (res.code === "200") {
        this.programmerOptions = res.content
      } else {
        Vue.prototype.$notify.error({
          title: "错误",
          message: "数据获取异常"
        })
      }
    },


  },
  mounted() {
    this.getCitys();
    this.getTalentCategory();

  }


}
</script>

<style scoped>

</style>